/*
 * @Author: wangguanqing 
 * @Date: 2018-06-25 09:03:01 
 * @Last Modified by: hy
 * @Last Modified time: 2018-09-14 14:51:27
 */

<template>
  <div class="cyy_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
        <div slot="main" class="cloudStorehouse">
            <div class="waterPolo">
              <div class="waterPolo_whole">
                  <div class="waterPolo_whole_bg">
                    <div class="inNumber">
                        <p>入库数</p>
                        <p>{{enterWarehouseData.total}}</p>
                    </div>
                    <div class="outNumber">
                        <p>出库数</p>
                        <p>{{outWarehouseData.total}}</p>
                    </div>
                </div>
              </div>
              <liquidfill-chart v-model="locationUsing"></liquidfill-chart>
            </div>
            <div class="dataDisplay">
                <top-logo-title>
                    <div slot="topTitle">产业园云仓数据</div>
                </top-logo-title>
                <div class="chart">
                  <!-- 视频播放 -->
                  <div class="video" >
                      <video autoplay loop :src="videoUrl"></video>
                  </div>
                  <!-- 各商家出库量 -->
                    <div class="outboundQuantity">
                        <main-title>
                          <span slot="title">各商家出库量</span>
                        </main-title>
                        <div slot="main" style="margin-top:20px;">
                          <div class="bcon">
                            <div class="boxRow">
                              <div class="firstColumn">商家名称</div>
                              <div class="secondColumn">出库时间</div>
                              <div class="thirdColumn">出库量</div>
                            </div>
                            <div class="list_lh">
                              <ul>
                                <li v-if="outWarehouseData.list.length >= 1" v-for="(item, index) in outWarehouseData.list" :key="index">
                                  <div class="name">{{item.name.slice(0,6)}}</div>
                                  <div class="time">{{item.percent}}</div>
                                  <div class="num boldFont">{{item.value}}</div>
                                </li>
                                <li class="tableNoData" v-else>
                                  暂无数据
                                </li>
                              </ul>
                            </div>
                          </div>
                          <!-- <div style="margin-bottom:10px;">
                            <table class="gridtable">
                              <tr>
                                <th class="firstColumn" style="padding-left:20px;">商家名称</th>
                                <th class="secondColumn">出库时间</th>
                                <th class="thirdColumn">出库量</th>
                              </tr>
                            </table>
                          </div>
                          <div class="top10Scroll">
                            <table class="gridtable">
                              <tr v-if="outWarehouseData.list.length >= 1" v-for="(item, index) in outWarehouseData.list" :key="index">
                                <td class="secondColumnColor" style="padding-left:22px;">{{item.name.slice(0,6)}}</td>
                                <td class="secondColumnColor">{{item.percent}}</td>
                                <td class="thirdColumnColor boldFont">{{item.value}}</td>
                              </tr>
                              <div v-else class="tableNoData">暂无数据</div>
                            </table>
                          </div> -->
                        </div>
                    </div>
                    <!-- 各商家入库量 -->
                    <div class="scheduledReceipt">
                        <main-title>
                          <span slot="title">各商家入库量</span>
                        </main-title>
                        <div slot="main" style="margin-top:20px;">
                          <div class="bcon">
                            <div class="boxRow">
                              <div class="firstColumn">商家名称</div>
                              <div class="secondColumn">入库时间</div>
                              <div class="thirdColumn">入库量</div>
                            </div>
                            <div class="list_lh">
                              <ul>
                                <li v-if="enterWarehouseData.list.length >= 1" v-for="(item, index) in enterWarehouseData.list" :key="index">
                                  <div class="name">{{item.name.slice(0,6)}}</div>
                                  <div class="time">{{item.percent}}</div>
                                  <div class="num boldFont">{{item.value}}</div>
                                </li>
                                <li class="tableNoData" v-else>
                                  暂无数据
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                    </div>
                    <!-- 在库数量趋势 -->
                    <div class="tradingIn">
                        <main-title>
                          <span slot="title">在库数量趋势(万)</span>
                        </main-title>
                        <line-chart v-model="tradingInArr" :chartStyle="'width:402px;min-height:200px;'" :option="lineChartOption"></line-chart>
                    </div>
                </div>
            </div>
        </div>
    </bg-lay-out>
  </div>
</template>
<script>
require("@/components/scrollList/scroll.js");
import topLogoTitle from "@/components/cyy/topLogoTitle";
import mainTitle from "@/components/cyy/mainTitle";
import chart from "@/components/Charts/newChart";
import chartLayOut from "@/components/Charts/chartLayOut";
import barCharts from "@/components/Charts/barCharts";
import barChart from "@/components/Charts/barChart";
import lineChart from "@/components/Charts/lineChart";
import pieChart from "@/components/Charts/pieChart";
import ICountUp from "vue-countup-v2";
import bgLayOut from "@/components/bgLayOut/index";
import cyyMap from "@/components/cyy/cyyMap";
import selDate from "@/components/cyy/selDate";
import selfQuotientMap from "@/components/cyy/selfQuotientMap";
import liquidfillChart from "@/components/Charts/liquidfillChart.vue";
import {
  GetDataByTarget,
  GetDetailList,
  GetWarehouseData
} from "@/api/cyy/IndustrialParkForCloudStorehouse";
export default {
  name: "sellAnalysis",
  components: {
    topLogoTitle,
    mainTitle,
    chart,
    ICountUp,
    bgLayOut,
    barCharts,
    barChart,
    lineChart,
    pieChart,
    selDate,
    cyyMap,
    chartLayOut,
    selfQuotientMap,
    liquidfillChart
  },
  data() {
    return {
      locationUsing: {}, // 库位使用数据
      outWarehouseData: {
        total: 0,
        list: []
      }, // 出库数据
      enterWarehouseData: {
        total: 0,
        list: []
      }, // 入库数据
      lineChartOption: {
        grid: {
          left: "15%"
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(40,231,135,0.5)",
        endColor: "rgba(40,231,135,0.1)"
      },
      tradingInArr: [],
      videoUrl: ""
    };
  },
  mounted() {
    this.fechData();
  },
  methods: {
    scrollFun() {
      $(document).ready(function() {
        $(".list_lh li:even").addClass("lieven");
      });
      $(function() {
        $("div.list_lh").myScroll({
          speed: 40,
          rowHeight: 34
        });
      });
    },
    // 库位使用状态
    async getLocationUsingData() {
      const p = {
        queryType: "32001"
      };
      const res = await GetDataByTarget(p);
      if (res.data.code === "0") {
        this.$set(this, "locationUsing", res.data.result);
      }
    },
    // 获取商家出库数据
    async getOutWarehouseData() {
      const p = {
        queryType: "32015"
      };
      const res = await GetWarehouseData(p);
      if (res.data.code === "0") {
        this.$set(this, "outWarehouseData", res.data.result);
        this.scrollFun();
      }
    },
    // 获取商家入库数据
    async getEnterWarehouseData() {
      const q = {
        queryType: "32016"
      };
      const res = await GetWarehouseData(q);
      if (res.data.code === "0") {
        this.$set(this, "enterWarehouseData", res.data.result);
        this.scrollFun();
      }
    },
    // 获取在库数量趋势
    async getTradingInArr() {
      const q = {
        queryType: "32014",
        timeAccuracy: "4003",
        timeType: "3010"
      };
      const res = await GetDetailList(q);
      if (res.data.code === "0") {
        res.data.result.forEach(item => {
          item.xData = item.xData.slice(5, item.xData.length);
        });
        this.$set(this, "tradingInArr", res.data.result);
      }
    },
    fechData() {
      this.$set(
        this,
        "videoUrl",
        process.env.NODE_ENV === "development"
          ? "http://172.16.0.135:9001/api/123.mp4"
          : "http://" + window.location.host + "/api/123.mp4"
      );
      this.getLocationUsingData();
      this.getEnterWarehouseData();
      this.getOutWarehouseData();
      this.getTradingInArr();
    }
  }
};
</script>
<style>
@import "../../../../styles/jquery-barrager.css";
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";
@keyframes circleAnimat {
  form {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(40deg);
  }
}
.cloudStorehouse {
  .waterPolo {
    @include absoluteAllSides(0, 0, 0, 0, 1);
    overflow: hidden;
    .waterPolo_whole {
      display: flex;
      @include absoluteAllSides(0, 0, 0, 0, 1);
      & .waterPolo_whole_bg {
        position: relative;
        width: 1024px;
        height: 768px;
        margin: auto;
        background: url("../../../../../static/img/cyy/waterPolo.png") center
          no-repeat;
        background-size: 984px 728px;
        .inNumber {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 22px;
          right: 22px;
          width: 199px;
          height: 199px;
          line-height: 1.3;
          color: #28e787;
          & p:nth-of-type(1) {
            font-size: 25px;
          }
          & p:nth-of-type(2) {
            @include din(55px);
          }
          &:after {
            content: "";
            position: absolute;
            top: -20px;
            right: -20px;
            z-index: 1;
            width: 237px;
            height: 231px;
            background: url("../../../../../static/img/cyy/waterPolo_top.png")
              left top no-repeat;
            background-size: 100% 100%;
            animation: circleAnimat 4s 2s ease infinite alternate;
          }
        }
        .outNumber {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 24px;
          left: 24px;
          z-index: 1;
          width: 213px;
          height: 213px;
          line-height: 1.3;
          color: #8693f3;
          & p:nth-of-type(1) {
            font-size: 27px;
          }
          & p:nth-of-type(2) {
            @include din(60px);
          }
          &:after {
            content: "";
            position: absolute;
            bottom: -30px;
            left: -28px;
            z-index: 1;
            width: 267px;
            height: 267px;
            background: url("../../../../../static/img/cyy/waterPolo_bot.png")
              left top no-repeat;
            background-size: 100% 100%;
            animation: circleAnimat 4s 2s ease infinite alternate;
          }
        }
      }
    }
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);

    & .chart {
      @include absoluteAllSides(150, 40, 150, 75, 1);

      .video {
        position: absolute;
        top: 60px;
        left: 30px;
        width: 385px;
        height: 240px;
        padding: 15px;
        background: url("../../../../../static/img/cyy/video_wholeBor.png") left
          top no-repeat;
        background-size: 100% 100%;
        &::after {
          content: "";
          position: absolute;
          right: -180px;
          bottom: -114px;
          z-index: 1;
          width: 276px;
          height: 115px;
          background: url("../../../../../static/img/cyy/video_bor.png") left
            top no-repeat;
          background-size: 100% 100%;
        }
      }
      .outboundQuantity {
        position: absolute;
        bottom: 85px;
        left: -5px;
        &::after {
          content: "";
          position: absolute;
          bottom: -20px;
          left: 0;
          z-index: 1;
          width: 368px;
          height: 116px;
          background: url("../../../../../static/img/cyy/outboundQuantity_bor.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
        ul,
        li,
        dl,
        ol {
          list-style: none;
        }
        a {
          color: #666;
          text-decoration: none;
        }
        .bcon {
          width: 333px;
          margin: 20px auto 0px;
        }
        .bcon .boxRow {
          /*width: 100%;*/
          padding-left: 20px;
          padding-right: 10px;
          height: 40px;
          line-height: 40px;
          color: #2ff0d2;
          font-weight: bold;
          font-size: 18px;
          display: flex;
          background-color: rgba(0, 209, 255, 0.2);
        }
        .bcon .firstColumn {
          width: 30%;
          text-align: left;
          color: #2fecce;
        }
        .bcon .secondColumn {
          width: 40%;
          text-align: left;
        }
        .bcon .thirdColumn {
          width: 30%;
          text-align: left;
        }
        .list_lh {
          height: 225px;
          overflow: hidden;
        }
        .list_lh li {
          padding: 5px 10px 5px 20px;
          display: flex;
          line-height: 24px;
        }
        .list_lh ul li .name {
          width: 30%;
          text-align: left;
          font-size: 14px;
          color: #00ffff;
        }
        .list_lh ul li .time {
          width: 40%;
          text-align: left;
          font-size: 14px;
          color: #00ffff;
        }
        .list_lh ul li .num {
          width: 30%;
          text-align: left;
          font-size: 24px;
          color: #8693f3;
        }
      }
      .scheduledReceipt {
        position: absolute;
        top: 50px;
        right: 35px;
        &::after {
          content: "";
          position: absolute;
          right: 0;
          bottom: -10px;
          z-index: 1;
          width: 433px;
          height: 137px;
          background: url("../../../../../static/img/cyy/scheduledReceipt_bor.png")
            left top no-repeat;
          background-size: 100% 100%;
        }
        ul,
        li,
        dl,
        ol {
          list-style: none;
        }
        a {
          color: #666;
          text-decoration: none;
        }
        .bcon {
          width: 333px;
          margin: 20px auto 0px;
        }
        .bcon .boxRow {
          /*width: 100%;*/
          padding-left: 20px;
          padding-right: 10px;
          height: 40px;
          line-height: 40px;
          color: #2ff0d2;
          font-weight: bold;
          font-size: 18px;
          display: flex;
          background-color: rgba(0, 209, 255, 0.2);
        }
        .bcon .firstColumn {
          width: 30%;
          text-align: left;
          color: #2fecce;
        }
        .bcon .secondColumn {
          width: 40%;
          text-align: left;
        }
        .bcon .thirdColumn {
          width: 30%;
          text-align: left;
        }
        .list_lh {
          height: 225px;
          overflow: hidden;
        }
        .list_lh li {
          padding: 5px 10px 5px 20px;
          display: flex;
          line-height: 24px;
        }
        .list_lh ul li .name {
          width: 30%;
          text-align: left;
          font-size: 14px;
          color: #00ffff;
        }
        .list_lh ul li .time {
          width: 40%;
          text-align: left;
          font-size: 14px;
          color: #00ffff;
        }
        .list_lh ul li .num {
          width: 30%;
          text-align: left;
          font-size: 24px;
          color: #2fecce;
        }
      }
      .tradingIn {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>